<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        innerHTML 会将字符串中的标签进行解析
        innerText 会将字符串中的 \n 转换为 <br>
        textContent 不作任何转换
     -->
    <div id="app">
        <h4>插值表达式语法</h4>
        <p>vue的插值表达式在页面完成变量输出后，就已经自动构建了主动数据渲染操作【响应式】</p>
        <!-- 
            vue的插值表达式不能渲染字符串标签到页面中 
            因为vue使用插值表达式将转换后的字符文本以DOM的textContent属性完成页面内容写入
        -->
        <p>domStr:{{ domStr }}</p>
        <p>str:{{ str }}</p>

        <!-- 
            常规页面开发：以页面为驱动- 数据变化=找到对应操作的DOM=控制DOM更新页面
            响应框架的页面开发：以数据为驱动- 数据变化=修改响应式数据变量
         -->
        <p>num:{{ num }}</p>
        <p>num:{{ num }}</p>
        <p>num:{{ num }}</p>
        <p>num:{{ num }}</p>
        <p>num:{{ num }}</p>
        <p>num:{{ num }}</p>
        <input type="button" value="setNum" v-on:click="setNum()">
    </div>

    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";


        window.vm = createApp({
            data(){
                return {
                    domStr:"<p>标签字符串</p>",
                    str:"第一段文本\n第二段文本",
                    num:Math.random()

                }
            },
            methods:{
                setNum(){
                    this.num = Math.random();
                }
            }
        }).mount("#app")

    </script>
</body>
</html>